<template>
  <div class="warp_auto">
    <el-form ref="form" :model="form" class="warp_top">
      <div class="jiansuo-box">
        <span class="label">统计方式：</span>
        <el-select v-model="form.region" @change="selectChanged"  class="input">
          <el-option v-for="item in options" :key="item.id" :value="item.label"></el-option>
        </el-select>
      </div>

      <div class="jiansuo-box" v-if='this.val==="按天"'>
        <span class="label">日期：</span>
        <el-date-picker
          class="input"
          v-model="form.startTime"
          type="date"
          :editable="false"
          prefix-icon="el-icon-caret-bottom"
          value-format="yyyy-MM-dd"
          :clearable='false'>
        </el-date-picker>
        <span  class="line" >--</span>
        <el-date-picker
          class="input"
          v-model="form.endTime"
          type="date"
          :editable="false"
          prefix-icon="el-icon-caret-bottom"
          value-format="yyyy-MM-dd"
          :clearable='false'>
        </el-date-picker>
      </div>

      <div class="jiansuo-box" v-else-if='this.val==="按月"'>
        <span class="label">年份：</span>
        <el-date-picker
          class="input"
          v-model="form.value3"
          type="year" placeholder="选择年"
          value-format="yyyy">
        </el-date-picker>
      </div>
      <div class="jiansuo-box">
        <el-button type="primary" icon="el-icon-search" @click="onSubmit" class="btn">检索</el-button>
      </div>
    </el-form>

    <div class="box">
      <el-card shadow="never" class="box_card">
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main1"  style="width: 100%; height: 300px"></div>
      </el-card>
      <!-- 转入科室分析 -->
      <el-card shadow="never" class="box_card">
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="maininto" style="width: 100%; height: 300px"></div>
      </el-card>
      <!-- 转出科室分析 -->
      <el-card shadow="never" class="box_card">
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="mainanalysis" style=" width: 100%; height: 300px"></div>
      </el-card>
    </div>

    <el-card shadow="never" style="margin-bottom: 20px">
      <div class="pei">
       <div id="zhe" style="float: left; width: 100%; height: 300px"></div>
     </div>
   </el-card>
   <el-card shadow="never"
     <el-popover
       placement="top-start"
       width="60"
       trigger="hover"
       content="导出到Excel表"
       style="float: right"
     >
       <el-button
         type="primary"
         style="margin-bottom: 10px"
         @click="Excel"
         slot="reference"
         >导出
         <i class="el-icon-question"></i>
       </el-button>
     </el-popover>
     <el-table
       :data="dataarr"
       stripe
       height="420"
       style="width: 100%"
       :header-cell-style="{ background: '#d2e0f9', color: '#606266' }"
     >
       <el-table-column label="日期" >
         <template slot-scope="scope">
           <span>{{ scope.row.dataTime }}</span>
         </template>
       </el-table-column>
       <el-table-column label="现有患者"  align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.exitPatientSum }}</span>
         </template>
       </el-table-column>
       <el-table-column label="转入患者"  align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.transferPatientSum }}</span>
         </template>
       </el-table-column>
       <el-table-column label="转出患者"  align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.rollOutPatientSum }}</span>
         </template>
       </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import axios from "axios";
import echarts from "echarts";
import {
  getOutAndIn,
  getNumByExitType,
  getExitType,
  getEnterDepartment,
  getExitDepartment,
  inOutIcuStatistics,
  downloadInOutTotal,
  // inOutIcuStatisticsedit
} from "@/api/table";
//import myTable from "@/components/myTable/index";
import componentDialog from "@/components/mask/churuke.vue";
import {getTenantId} from "@/utils/auth";

export default {
  components: {
    componentDialog,
  },
  data() {
    return {
      dialogVisible: false, //控制弹窗 显示
      dialogInfo: {},
      value: "",
      zanalysisConditionsVal: "",
      fenxi: [
        {
          value: "0",
          label: "患者数量",
        },
        {
          value: "1",
          label: "转出方式",
        },
      ],
      val: "按天",
      arr: [],
      arrlist: [], //转出分析
      arrinfo: [], //转入科室分析
      mainanalysis: [], //转出科室分析
      zhe: [], //折线图
      dataarr: [],
      chuyuan: [],
      zhuanke: [],
      siwang: [],
      fangqi: [],
      ss: [],
      zhuanyuan: [],
      form: {
        region: "按天",
        value3: "",
        startTime: "",
        endTime: "",
      },
      options: [
        {
          id: "0",
          value: "0",
          label: "按天",
        },
        {
          id: "1",
          value: "1",
          label: "按月",
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    this.getCurrentMonthFirst();
    this.getCurrentMonthLast();
    this.getCurrentYear();
    //进入页面需要传默认参数
    this.onSubmit();
  },
  mounted() {},
  methods: {
    getCurrentMonthFirst() {
      var date = new Date();
      date.setDate(1);
      var month = parseInt(date.getMonth() + 1);
      var day = date.getDate();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      this.form.startTime = date.getFullYear() + "-" + month + "-" + day;
    },
    getCurrentMonthLast() {
      var date = new Date();
      var month = parseInt(date.getMonth() + 1);
      var day = date.getDate();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      this.form.endTime = date.getFullYear() + "-" + month + "-" + day;
    },
    getCurrentYear() {
      var date = new Date();
      this.form.value3=date.getFullYear()+"";
    },
    //导出
    Excel() {
      if (this.form.region === "按天") {
        axios({
         //url:"http://localhost:9528/api/inOutIcuStatistics/downloadInOutTotal", //本地
          url: "/api/inOutIcuStatistics/downloadInOutTotal", //打包
          method: "post",
          responseType: "blob", //也可以使用blob
          headers:{
            'tenantId' : getTenantId()
          },
          data: {
            type: this.form.region,
            startTime: this.form.startTime,
            endTime: this.form.endTime,
          },
        })
          .then((res) => {
            if (res) {
              let blob = new Blob([res.data], {
                type: "application/vnd.ms-excel;charset=utf-8",
              }); // res就是接口返回的文件流了
              let objectUrl = URL.createObjectURL(blob);
              const elink = document.createElement("a");
              elink.download = "出入科统计信息.xls"; //下载文件名称,
              elink.style.display = "none";
              elink.href = objectUrl;
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href); // 释放URL 对象
              document.body.removeChild(elink);
            }
          })
          .catch(function (error) {
          });
      } else if (this.form.region === "按月") {
        axios({
          //url:"http://localhost:9528/api/inOutIcuStatistics/downloadInOutTotal", //本地
          url: "/api/inOutIcuStatistics/downloadInOutTotal", //打包
          method: "post",
          responseType: "blob", //也可以使用blob
          headers:{
            'tenantId' : getTenantId()
          },
          data: {
            type: this.form.region,
            year: this.form.value3,
          },
        })
          .then((res) => {
            if (res) {
              let blob = new Blob([res.data], {
                type: "application/vnd.ms-excel;charset=utf-8",
              }); // res就是接口返回的文件流了
              let objectUrl = URL.createObjectURL(blob);
              const elink = document.createElement("a");
              elink.download = "出入科统计信息.xls"; //下载文件名称,
              elink.style.display = "none";
              elink.href = objectUrl;
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href); // 释放URL 对象
              document.body.removeChild(elink);
            }
          })
          .catch(function (error) {
          });
      }
    },
    //搜索
    onSubmit() {
       //转入转出分析
        getOutAndIn({
          type: this.form.region,
          startTime: this.form.startTime,
          endTime: this.form.endTime,
          year: this.form.value3
        }).then((res) => {
          this.arr = res.data;
          var myChart = echarts.init(document.getElementById("main1"));
          myChart.setOption({
            title: {
              text: "转入转出分析", //主标题
              x: "center", //x轴方向对齐方式
            },
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            legend: {
              orient: "vertical",
              left: "left",
              data: ["转入患者", "转出患者"],
            },
            series: [
              {
                name:"",
                type: "pie",
                radius: "55%",
                center: ["50%", "50%"],
                data: this.arr,
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          });
        });
        // 转入科室分析
        getEnterDepartment({
          type: this.form.region,
          startTime: this.form.startTime,
          endTime: this.form.endTime,
          year: this.form.value3
        }).then((res) => {
          this.arrinfo = res.data;
            var myChart = echarts.init(document.getElementById("maininto"));
            myChart.setOption({
              title: {
                text: "转入科室分析", //主标题
                x: "center", //x轴方向对齐方式
              },
              tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c} ({d}%)",
              },
              legend: {
                orient: "vertical",
                left: "left",
                data: ["内一病区"],
              },
              series: [
                {
                  name: "",
                  type: "pie",
                  radius: "55%",
                  center: ["50%", "50%"],
                  data: this.arrinfo,
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                  },
                },
              ],
            });

        });
        // 转出科室分析
        getExitDepartment({
          type: this.form.region,
          startTime: this.form.startTime,
          endTime: this.form.endTime,
          year: this.form.value3
        }).then((res) => {
          this.mainanalysis = res.data;
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById("mainanalysis"));
          // 绘制图表
          myChart.setOption({
            title: {
              text: "转出科室分析", //主标题
              x: "center", //x轴方向对齐方式
            },
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            legend: {
              orient: "vertical",
              left: "left",
              data: ["内一病区"],
            },
            series: [
              {
                name: "",
                type: "pie",
                radius: "55%",
                center: ["50%", "50%"],
                data: this.mainanalysis,
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          });
        });
        //折线图
        getNumByExitType({
          type: this.form.region,
          startTime: this.form.startTime,
          endTime: this.form.endTime,
          year: this.form.value3
        }).then((res) => {
          let datetimeList  = res.data.datetimeList; //出院
          let exitpatientNumList  = res.data.exitpatientNumList; //转科
          let transferPatientNumList  = res.data.transferPatientNumList; //死亡
          let rollOutPatientNumList  = res.data.rollOutPatientNumList; //死亡
          let myChart = this.$echarts.init(document.getElementById("zhe"));
          myChart.setOption({
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: [
                "现有患者",
                "转入患者",
                "转出患者"
              ]
            },
            toolbox: {
              show: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: datetimeList,
            },
            yAxis: {
              type: "value",
              axisLabel: {
                formatter: "{value}",
              },
            },
            series: [
              {
                name: "现有患者",
                type: "line",
                data: exitpatientNumList,
              },
              {
                name: "转入患者",
                type: "line",
                data: transferPatientNumList,
              },
              {
                name: "转出患者",
                type: "line",
                data: rollOutPatientNumList,
              }
            ],
          });
        });
        //列表统计
        inOutIcuStatistics({
          type: this.form.region,
          startTime: this.form.startTime,
          endTime: this.form.endTime,
          year: this.form.value3
        }).then((res) => {
          this.dataarr = res.data;
        });
    },
    selectChanged(value) {
      this.val = value;
    },
    //初始化数据
    initData() {},
  },
};
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  margin-bottom: 20px;
  .box_card {
    width: 33%;
    height: 300px;
    margin-right: 10px;
  }
}
</style>
